<template>
  <section class="lineage-analytic-result">
    <!-- header -->
    <header class="analytic-result-header">
      <div class="tab-container">
        <div
          :class="
            lineageType === 'TABLE' ? 'tab-item-active' : 'tab-item-inactive'
          "
          class="tab-item"
          @click="lineageType = 'TABLE'"
        >
          表格级血缘
        </div>
        <div
          :class="
            lineageType === 'FIELD' ? 'tab-item-active' : 'tab-item-inactive'
          "
          class="tab-item"
          @click="lineageType = 'FIELD'"
        >
          字段级血缘
        </div>
      </div>
    </header>
    <!-- data lineage canvas -->
    <main class="lineage-canvas">
      <a-tabs v-model="lineageType" size="small">
        <a-tab-pane :key="'TABLE'" tab="表格级血缘">
          <table-lineage-pipeline />
        </a-tab-pane>
        <a-tab-pane :key="'FIELD'" tab="字段级血缘">
          <field-lineage-pipeline />
        </a-tab-pane>
      </a-tabs>
    </main>
  </section>
</template>

<script lang="ts">
/**
 * 血缘解析结果
 */
import { Component, Vue } from 'vue-property-decorator'
import FieldLineagePipeline from '@/components/field-lineage-pipeline/FieldLineagePipeline.vue'
import TableLineagePipeline from '@/components/table-lineage-pipeline/TableLineagePipeline.vue'

type LineageType = 'TABLE' | 'FIELD'

@Component({
  name: 'LineageAnalyticResult',
  components: {
    FieldLineagePipeline,
    TableLineagePipeline,
  },
})
export default class LineageAnalyticResult extends Vue {
  private lineageType: LineageType = 'TABLE'
}
</script>

<style lang="less" scoped>
@import '../../styles/constants';

.lineage-analytic-result {
  background-color: @VIEW_BACKGROUND_COLOR;
  height: 100%;
  width: 100%;

  .analytic-result-header {
    align-items: center;
    border-bottom: 1px solid @NEUTRAL_COLOR6;
    display: flex;
    height: 48px;
    justify-content: space-between;
    line-height: 48px;
    padding: 9px 12px 0;

    .tab-container {
      display: flex;
      height: 40px;

      .tab-item {
        background: transparent;
        border: 1px solid transparent;
        border-radius: 4px 4px 0 0;
        color: #5d637e;
        cursor: pointer;
        font-family: PingFangSC-Regular, PingFang SC;
        font-size: 14px;
        font-weight: 400;
        height: 40px;
        line-height: 40px;
        margin-right: 2px;
        text-align: center;
        user-select: none;
        width: 102px;
      }

      .tab-item-inactive {
        &:hover {
          color: #2a4edb;
          opacity: 0.8;
        }
      }

      .tab-item-active {
        background-color: #fff;
        border-color: #e8e8e8;
        border-bottom-color: #fff;
        color: #2a4edb;
      }
    }
  }

  .lineage-canvas {
    background-color: #fff;
    height: calc(100% - 48px);

    :deep(.ant-tabs) {
      height: 100%;

      .ant-tabs-bar,
      .ant-tabs-top-bar,
      .ant-tabs-small-bar {
        display: none;
      }

      .ant-tabs-content {
        height: 100%;

        .ant-tabs-tabpane {
          height: 100%;
        }
      }
    }
  }
}
</style>
